<template>
	<view class="container" v-if="order">
		<view class="bgw">
			<view class="zgj-row vechile">
				<image class="brand" mode="aspectFit" :src="order.brand_logo"></image>
				<view class="carinfo">
					<text>{{order.brand}}</text>
					<text style="font-size: 13px;">{{order.vin}}</text>
				</view>
				<view class="sts">{{order.state|sts}}</view>
			</view>
			<uni-section title="需求" type="line">
				<view class="zgj-row parts">
					<image v-for="pi of partImgs" :src="pi"></image>
				</view>
				<view>{{order.requirements}}</view>
				<zgj-voice :info="voiceInfo" v-if="voiceInfo"></zgj-voice>
			</uni-section>
			<uni-section title="报价信息" type="line" v-if="quotes.length>0">
				<template v-for="quote of quotes">
					<view class="zgj-row channel">
						<text class="ch-name">{{quote.channelName}}</text>
						<button style="flex-shrink: 0;" v-if="canApply(quote.channelId)" size="mini" type="primary" @click="showApply(quote)">积分申请</button>
						<uni-icons v-if="quote.tel" type="phone-filled" size="25" color="#2ead7a"
							@click="onphone(quote)"></uni-icons>
					</view>
					<view class="zgj-parts" v-for="p of quote.parts" :key="p.name">
						<view class="name">{{p.name}}</view>
						<view class="content">
							<template v-for="q of p.items">
								<view class="quote">
									<view class="quality">
										{{q.qualityName}}
									</view>
									<view class="price">
										￥{{q.price|money}}
									</view>
								</view>
								<view class="remark" v-if="q.partsExplain">{{q.partsExplain}}</view>
							</template>
						</view>
					</view>
					<button v-if="order.transfered===false" type="primary" size="mini" style="margin-top: 20px;"
						@click="purchse(quote)">选件下单</button>
				</template>
			</uni-section>
			<view class="zgj-fx-c ordinfo">
				<text>订单编号：{{order.sn}}</text>
				<text>询价时间：{{order.create_time}}</text>
			</view>
		</view>
		<uni-popup ref="dlgApply" type="dialog">
			<uni-popup-dialog ref="inputClose" :before-close="true" @close="scoreClose" mode="input" :title="'积分申请-'+applyTitle"  placeholder="请输入订单金额"
				@confirm="scoreApply"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	var app = getApp()
	import Stat from '@/common/stat.js'
	export default {
		mixins: [Stat],
		data() {
			return {
				order: null,
				partImgs: [],
				voiceInfo: null,
				quotes: [],
				applyTitle:'',
				canApplyIds:[],
				applyInfo:{
					enquiry_id:0,
					channel_id:0,
					amount:0
				}
			}
		},
		onLoad(e) {
			console.log(e)
			this.loadData(e.id)
		},
		methods: {
			async loadData(id) {
				this.$http.get('/web/ai/askinfo', {
					id: id
				}, (res) => {
					this.order = res
					if (res.audio_url) {
						this.voiceInfo = {
							url: res.audio_url,
							time: res.audio_time
						}
					}
					if (res.pics) {
						this.partImgs = res.pics.split(",")
					}
					if (res.vin_pic) {
						this.partImgs.splice(0, 0, res.vin_pic)
					}
					if (res.enquiry) {
						res.enquiry.quoteList.forEach(o => {
							o.parts = this.buildQuotes(o.partList)
						})
						this.quotes = res.enquiry.quoteList
						console.log("quotes:", this.quotes)
					}
					this.checkApplyState(res.enquiry.id)
				})
			},
			canApply(channelId){
				return this.canApplyIds.length>0 && this.canApplyIds.indexOf(channelId)>=0
			},
			//合并配件
			buildQuotes(arr) {
				if (!arr || arr.length === 0) return []
				var lst = []
				arr.forEach(o => {
					let idx = o.oename.indexOf('-')
					if (idx >= 0) {
						o.qualityName = o.oename.substring(idx + 1)
						o.oename = o.oename.substring(0, idx)
					}
					var item = this.findItem(o.oename, lst)
					if (item == null) {
						item = {
							name: o.oename,
							items: [o]
						}
						lst.push(item)
					} else {
						item.items.push(o)
					}
				})
				return lst
			},
			findItem(name, lst) {
				if (lst.length === 0) return null
				for (var i = 0; i < lst.length; i++) {
					var item = lst[i]
					if (item.name === name) return item
				}
				return null
			},
			onphone(item) {
				console.log(item)
				var items = item.tel.split(',')
				uni.showActionSheet({
					itemList: items,
					success: (e) => {
						let phone = items[e.tapIndex]
						uni.makePhoneCall({
							phoneNumber: phone,
							success: () => {
								this.statTel({
									phone: phone,
									channel_id: item.channelId,
									enquiry_id: this.order.enquiry.id
								})
							}
						})
					}
				})
			},
			purchse(quote) {
				app.globalData.cart = {
					ask: this.order,
					quote: quote
				}
				console.log("cart:", app.globalData.cart)
				uni.navigateTo({
					url: '/uni_modules/zgj-pages/pages/orders/cart'
				})
			},
			showApply(quote){
				this.applyTitle= quote.channelName
				this.applyInfo.channel_id = quote.channelId
				this.applyInfo.enquiry_id = this.order.enquiry.id
				this.$refs.dlgApply.open()
			},
			scoreApply(val){
				if(!val) return
				console.log(val)
				this.applyInfo.amount = val
				this.$http.post('/web/ai/score/apply',this.applyInfo,(res)=>{
					this.scoreClose()
					this.canApplyIds = []
				})
			},
			scoreClose(){
				this.$refs.dlgApply.close()
			},
			checkApplyState(eid){
				this.$http.get('/web/ai/score/can_apply',{eid:eid},(resp)=>{
					this.canApplyIds = resp
				})
			}
		}
	}
</script>

<style lang="scss">
	.bgw {
		background-color: #fff !important;
		padding: 10px;

		.vechile {
			justify-content: space-between !important;
			align-items: center !important;
			padding-bottom: 10px;
			border-bottom: 1px solid $uni-border-color;

			.carinfo {
				display: flex;
				flex-direction: column;
				flex: 2;
			}

			.brand {
				width: 80px;
				height: 40px;
			}
		}

		.parts {
			flex-wrap: wrap !important;
			justify-content: flex-start !important;

			image {
				width: 75px;
				height: 75px;
				margin-bottom: 10px;
				margin-right: 10px;
			}
		}

		.uni-section {
			padding-bottom: 10px;
			border-bottom: 1px solid $uni-border-color;
		}

		.channel {
			justify-content: space-between !important;

			.ch-name {
				font-weight: 600;
			}
		}

		.ch-price {
			margin-left: 20px !important;
			color: $uni-color-error !important;
		}

		.ordinfo {
			padding-top: 10px;
			font-size: 13px;
		}

		.zgj-parts {
			width: 100%;
			display: flex;
			margin-top: 6px;
			flex-direction: row;
			align-items: center;

			.name {
				flex-grow: 0;
				width: 50%;
			}

			.content {
				width: 50%;
				flex-grow: 0;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;

				.remark {
					font-size: smaller;
					color: $uni-color-warning;
				}

				.quote {
					display: flex;
					flex-direction: row;
					width: 100%;

					.quality {
						width: 40%;
						flex-grow: 0;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
					}

					.price {
						width: 60%;
						flex-grow: 0;
						display: flex;
						flex-direction: column;
						justify-content: flex-end;
						align-items: flex-end;
						color: $uni-color-error !important;
					}
				}
			}

		}
	}
</style>